<template>
	<el-container :direction="vertical" id="main">
		<el-header height="56px" class="header">
			<span class="title">| 题库列表</span>
			<span>
				<el-button type="default" size="mini">
					<i class="el-icon-refresh"></i>
					刷新
				</el-button>
				<span class="help">
					<i class="el-icon-question"></i>
					帮助
				</span>
			</span>
		</el-header>

		<el-container :direction="vertical" class="list-content">
			<el-main class="content-header">
				<el-row :gutter="20">
					<el-col :span="20" :offset="0">
						<el-select v-model="form">
							<el-option
								label="创建时间"
								value="createdAt"
								checked=""
							></el-option>
							<el-option label="更新时间" value="updatedAt"></el-option>
						</el-select>
						<span> - </span>
						<el-date-picker
							v-model="form"
							type="datetime"
							placeholder="选择日期时间"
							default-time="12:00:00"
						>
						</el-date-picker>
						<span> - </span>
						<el-date-picker
							v-model="form"
							type="datetime"
							placeholder="选择日期时间"
							default-time="12:00:00"
						>
						</el-date-picker>
						<el-button type="default" size="mini" class="margin-left-20"
							>清除</el-button
						>
					</el-col>
					<el-col :span="4" :offset="0">
						<el-button type="default" size="mini">回收站文件</el-button>
					</el-col>
				</el-row>

				<el-row :gutter="20" class="margin-top-15">
					<el-col :span="20">
						<el-select
							v-model="search.subjecttypes"
							placeholder="科目"
							filterable
						>
							<el-option
								v-for="item in subjects"
								:key="item.value"
								:label="item.subjectname"
								:value="item.subjecttypes"
							>
							</el-option>
						</el-select>

						<el-select
							v-model="search.questiontype"
							value-key=""
							placeholder="题型"
							clearable
							filterable
							class="margin-left-20"
						>
							<el-option
								v-for="item in questionTypes"
								:key="item.value"
								:label="item.testquestionsname"
								:value="item.typesnum"
							>
							</el-option>
						</el-select>
						<el-select
							v-model="search.difficultDegree"
							value-key=""
							placeholder="难易程度"
							clearable
							filterable
							class="margin-left-20"
						>
							<el-option
								v-for="item in difficultDegree"
								:key="item.value"
								:label="item.stagename"
								:value="item.stagetypes"
							>
							</el-option>
						</el-select>
						<el-button type="primary" size="default" class="margin-left-20"
							>查询</el-button
						>
					</el-col>
				</el-row>
			</el-main>
			<el-container class="content-body margin-top-20" :direction="vertical">
				<!-- 表格 -->
				<question-table></question-table>
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
// 引入组件
import QuestionTable from "../../components/question/table.vue";

export default {
	components: {
		QuestionTable,
	},
	data() {
		return {
			vertical: "vertical",
			horizontal: "horizontal",
			form: {},
			rules: {},
			subjects: [], // 科目
			questionTypes: [], // 题型
			difficultDegree: [], // 难易度
			search: {}, // 查询参数，通过科目类型、题型、难易度查询
		};
	},
	created() {
		// 获取科目
		this.$axios.get("/system/sqSubjecttable/selSubject").then((res) => {
			if (res.data.code === 1) {
				this.subjects = res.data.data;
			}
		});
		// 获取难易度
		this.$axios.get("/system/sqStagetypes/selstagetypes").then((res) => {
			if (res.data.code === 1) {
				this.difficultDegree = res.data.data;
			}
		});
		// 获取题型
		this.$axios
			.get("/system/sqTestquestionstypes/selTestquestions")
			.then((res) => {
				if (res.data.code === 1) {
					this.questionTypes = res.data.data;
				}
			});
	},
	methods: {
		selectSubject() {
			console.log(this.search);
		},
	},
};
</script>

<style scoped>
.margin-left-20 {
	margin-left: 20px;
}
.margin-top-20 {
	margin-top: 20px;
}
.header {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	line-height: 56px;
}
.help {
	margin-left: 20px;
	margin-right: 20px;
}
.list-content {
	margin: 20px 30px;
	padding: 10px 30px;
	background-color: #fff;
}
</style>